<template>
    <div>
        <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="指标名称">
                    <el-input v-model="formInline.indexName" placeholder="请输入" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="getAssessmentIndexList">搜索</el-button>
                </el-form-item>
            </el-form>

            <el-button type="success" @click="dialogVisible = true, resetForm(ruleFormRef)">新增</el-button>
            <el-table :data="assessmentindexData" border style="width: 100%">
                <el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod" />
                <el-table-column prop="indexName" label="指标名称" align="center" />
                <el-table-column prop="indexDesc" label="指标描述" align="center" />
                <el-table-column label="操作" width="225">
                    <template v-slot="scope">
                        <el-link type="primary" size="small" @click="getAssessmentIndexById(scope.row.id)">编辑</el-link>
                        &ensp;
                        <el-link type="danger" size="small" @click="deleteAssessmentIndex(scope.row.id)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>


            <!-- 分页 -->
            <table style="margin: 5px auto;">
                <tbody>
                    <tr>
                        <td>
                            <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                                :page-sizes="[15, 20, 25, 30]" background layout="slot" :total="page.totalCount"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                                next-text="下一页">
                                <span>
                                    共 {{ page.totalCount }} 条，共 {{ page.pageCount }} 页，当前 {{ page.pageIndex }} / {{
                                        page.pageCount
                                    }} 页
                                </span>
                            </el-pagination>
                        </td>
                        <td>
                            <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                                :page-sizes="[15, 20, 25, 30]" background layout="sizes, slot,prev, pager, next"
                                :total="page.totalCount" @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
                                <span>
                                    <button @click="handleCurrentChange(1)" :disabled="page.pageIndex == 1">首页</button>
                                </span>
                            </el-pagination>
                        </td>
                        <td>
                            <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                                :page-sizes="[15, 20, 25, 30]" background layout="slot,jumper" :total="page.totalCount"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                                next-text="下一页">
                                <span>
                                    <button @click="handleCurrentChange(page.pageCount)"
                                        :disabled="page.pageIndex == page.pageCount">尾页</button>
                                </span>
                            </el-pagination>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- 弹出框 -->
            <el-dialog v-model="dialogVisible" title="新增考核指标" width="45%">
                <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                    class="demo-ruleForm" status-icon>
                    <el-form-item label="指标类型:" prop="indexType">
                        <el-select v-model="ruleForm.indexType" placeholder="请输入指标类型">
                            <el-option label="主观指标" value="主观指标" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="指标名称:" prop="indexName">
                        <el-input v-model="ruleForm.indexName" />
                    </el-form-item>
                    <el-form-item label="指标描述:" prop="indexDesc">
                        <el-input v-model="ruleForm.indexDesc" type="textarea" />
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                            提交
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, inject } from 'vue';
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import type { AxiosStatic } from "axios"

const ruleFormRef = ref<FormInstance>()

const axios = inject('axios') as AxiosStatic

//弹出层变量
const dialogVisible = ref(false)

//指标数据
const ruleForm = reactive({
    id: 0,
    indexType: "",
    indexName: "",
    indexDesc: "",
})

//验证
const rules = reactive<FormRules>({
    indexType: [
        {
            required: true,
            message: '请选择指标类型',
            trigger: 'change',
        },
    ],
    indexName: [
        { required: true, message: '请输入指标名称', trigger: 'blur' },
    ],
})

//根据id获取单条数据
const getAssessmentIndexById = async (id: number) => {
    dialogVisible.value = true
    await axios.get('http://47.95.178.186:8000/ExamineGetRout/api/AssessmentIndexRead/GetAssessmentIndexInfo?id=' + id).then(res => {
        ruleForm.id = res.data.result.id
        ruleForm.indexType = res.data.result.indexType
        ruleForm.indexName = res.data.result.indexName
        ruleForm.indexDesc = res.data.result.indexDesc
    })
}

//添加指标
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (ruleForm.id == 0 || ruleForm.id == null || ruleForm.id == undefined) {
                axios.post('http://47.95.178.186:8000/ExamineSetRout/api/AssessmentIndex/AddAssessmentIndex', ruleForm).then(res => {
                    if (res.data.code == 200) {
                        ElMessage({
                            message: '新增成功',
                            type: 'success',
                        })
                        dialogVisible.value = false
                        getAssessmentIndexList()
                    } else if (res.data.code == 202) {
                        ElMessage({
                            message: '指标名称已存在',
                            type: 'error',
                        })
                    } else {
                        ElMessage({
                            message: '新增失败',
                            type: 'error',
                        })
                    }
                })
            } else {
                axios.put('http://47.95.178.186:8000/ExamineSetRout/api/AssessmentIndex/UpdateAssessmentIndex', ruleForm).then(res => {
                    if (res.data.code == 200) {
                        ElMessage({
                            message: '修改成功',
                            type: 'success',
                        })
                        dialogVisible.value = false
                        getAssessmentIndexList()
                    } else if (res.data.code == 202) {
                        ElMessage({
                            message: '指标名称已存在',
                            type: 'error',
                        })
                    }
                    else {
                        ElMessage({
                            message: '修改失败',
                            type: 'error',
                        })
                    }
                })
            }
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

//查询条件
const formInline = reactive({
    indexName: ""
})

// 序号
const indexMethod = (index: number) => {
    return index += (page.pageSize) * (page.pageIndex - 1) + 1;
}

//分页变量
const page = reactive({
    pageIndex: 1,
    pageSize: 15,
    totalCount: 0,
    pageCount: 0,
})

//分页方法
const handleSizeChange = (val: number) => {
    page.pageIndex = 1;
    page.pageSize = val;
    getAssessmentIndexList();
}
const handleCurrentChange = (val: number) => {
    page.pageIndex = val;
    getAssessmentIndexList();
}

//获取指标列表
const assessmentindexData = ref([])

//连接服务端拿到数据
const getAssessmentIndexList = () => {
    axios.get('http://47.95.178.186:8000/ExamineGetRout/api/AssessmentIndexRead/GetAssessmentIndexList', {
        params: {
            pageIndex: page.pageIndex,
            pageSize: page.pageSize,
            indexName: formInline.indexName,
        }
    }).then(res => {
        assessmentindexData.value = res.data.result.data
        page.totalCount = res.data.result.totalCount
        page.pageCount = res.data.result.pageCount
    })
}

//删除指标
const deleteAssessmentIndex = (id: number) => {
    ElMessageBox.confirm(
        '确定要删除吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.delete('http://47.95.178.186:8000/ExamineSetRout/api/AssessmentIndex/RemoveAssessmentIndex?id=' + id, {
            }).then(res => {
                if (res.data.code == 200) {
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                    getAssessmentIndexList()
                } else {
                    ElMessage({
                        message: '删除失败',
                        type: 'error',
                    })
                }
            })
        })
}


//钩子函数
onMounted(() => {
    setTimeout(() => {
        getAssessmentIndexList()
    }, 200);
})
</script>

<style>
/* 样式表头的第一行 */
.el-table thead>tr:first-child th {
    background-color: #10bdd7;
    color: white;
    /* 设置背景颜色 */
}
</style>